<template>
    <el-tree
            ref="tree"
            @check="checkChange"
            node-key="id"
            :data="data"
            :check-strictly="checkStrictly"
            :show-checkbox="showCheckbox"
            :default-expand-all="expandAll"
            :check-on-click-node="checkOnClick"
            :expand-on-click-node="expandOnClick"
            :props="defaultProps">

            <span class="custom-tree-node" slot-scope="{ node, data }">
            <el-tooltip :content="data.name" placement="right" effect="light">
              <span>{{ data.name | ellipsis}}</span>
            </el-tooltip>
           <span style="color: silver">{{ data.type | viewWidgetType}}</span>
          </span>

    </el-tree>
</template>

<script>

    export default {

        mounted() {
            if (this.autoLoad) {
                //默认返回PC端树
                this.loadData({scene: this.viewWidget}, undefined);
            }
        },
        props: {
            viewWidget: {
                type: String,
                required: true
            },
            autoLoad: {          //是否自动加载数据
                default: true,
                type: Boolean
            },
            expandAll: {     //是否展开全部
                default: true,
                type: Boolean
            },
            checkStrictly: {
                default: false,
                type: Boolean
            },
            showCheckbox: {
                default: true,
                type: Boolean
            },
            checkOnClick: {  //是否在点击节点的时候选中节点
                default: false,
                type: Boolean
            },
            expandOnClick: {    //是否在点击节点的时候展开或者收缩节点
                default: true,
                type: Boolean
            },
            checkedKeys: {
                default: function () {
                    return [];
                },
                type: Array
            },
            filter: {            //节点过滤
                default: function () {
                    return {};
                },
                type: Object
            }
        },
        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'child',
                    label: 'name',
                }
            };
        },
        methods: {
            /**
             * 数据加载
             */
            loadData: function (_filter, checkedKeys) {
                let param = Object.assign({}, this.filter, _filter);

                this.$ajax.get("auth/view_widget/tree/0", {
                    params: param
                }).then(res => {
                    this.data = res.data;
                    if (checkedKeys !== undefined) {
                        this.initCheckKeys(checkedKeys);
                        this.$emit('loadSuccess', this.data);
                        return;
                    }
                    this.$emit('loadSuccess', this.data);
                })
            },
            /**
             * 树节点选中事件
             */
            checkChange: function (checkedVal, checkedObj) {
                this.$emit('checkChange', checkedVal, checkedObj);
            },
            /**
             * 根据 checkedKeys 来选中节点
             */
            initCheckKeys: function (checkedKeys) {
                if (checkedKeys) {
                    this.$refs.tree.setCheckedKeys(checkedKeys);
                    return;
                }

                if (this.checkedKeys.length === 0) {
                    return;
                }
                this.$refs.tree.setCheckedKeys(this.checkedKeys);
            },
            getCheckedKeys: function () {
                return this.$refs.tree.getCheckedKeys();
            }
        }
    }
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 17px;
    }
</style>
